%section
  %a.scroll-target{name: 'typography__small'}
  %h3.color-black Smaller sizes
  %p Includes a mixin, a variable and a class helper for each.

  .panel.panel--padded
    - ['small', 'smaller', 'smallest'].each do |s|
      %p{class: "font-#{s}"} The quick brown fox jumps over the lazy dog.
      %code.expandable
        = expandable_toggle
        %p= "<p class: 'font-#{s}'>The quick brown fox jumps over the lazy dog.</p>"
        %br/
        %p
          %span.color-primary Silent class:
          = "@extend %font-#{s};"
        %p
          %span.color-primary Variables:
          = "$#{s}-size, $#{s}-line-height"
